<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script> -->
    <script src="./Observer.js"></script>
    <script src="./MVue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{person.name}} -- {{person.age}}</h2>
      <h2>{{person.fav}}</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div v-text="person.name"></div>
      <div v-html="htmlStr"></div>
      <div>{{person.age}}</div>
      <input type="text" v-model="person.age" />
      <button v-on:click="handlerClick">按钮@</button>
    </div>
  </body>
  <script>
    const vm = new MVue({
      el: "#app",
      data: {
        person: {
          name: "小马哥",
          age: 18,
          fav: "姑娘",
        },
        list: [1, 2, 3, 4, 5],
        msg: "学习MVVM实现原理",
        htmlStr: "<h3>我是h3</h3>",
      },
      methods: {
        handlerClick() {
          console.log(this);
          this.$data.person.name = "小马哥11";
          this.person.age += 1;
          // this.$data.person.age += 1;
          // this.$data.person.age = 20;
        },
      },
    });
  </script>
</html>
